<template>
  <div class="homeAllSort">
    <!--<headers title="店铺"></headers>-->
    <div id="homeTop">
      <div class="shopTop" >
        <div class="left">
          <!--<i class="touXiang"></i>-->
          <div class="img">
            <img :src="shopImgUrl" alt="">
          </div>
          <div class="right">
            <p>{{shop.shopName}}</p>
            <span>已拼单：{{spellCount}}件</span>
          </div>
        </div>
        <i class="share right" @click="invite()"></i>
      </div>
      <div class="nav">
        <ul>
          <li class="on" @click="allS()">
            <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">全部</a>
          </li>
          <li @click="price()">
            <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">
              价格
              <i class="up"></i>
              <i class="down"></i>
            </a>
          </li>
          <li @click="typeS()">
            <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">类别</a>
          </li>
          <li @click="brand()">
            <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">品牌</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="allSort">
      <!--<div class="main-body">-->
      <div class="wrapper" ref="wrapper">

          <!--<ul class="list">
            <li class="item" v-for="(good, index) in goodsArr">
              <div @click="goPin(index)" class="a">
                <div class="top">
                  <div class="pic left"><img :src="good.mallImg" alt=""></div>
                  <div class="right">
                    <span class="goodsName">{{good.mallName}}</span>
                    <p class="goodsPrice">
                      <span class="red">￥{{good.salePrice/100}}</span>
                      <span class="gray">京东价：{{good.jdPrice/100}}</span>
                    </p>
                    <p class="goodsTime">
                      还差{{good.lackCount}}人，剩余
                      <Countdown :gpEndTime="Date.parse(new Date(good.gpEndTime)).toString()" endText="已经"
                                 ref="cd"></Countdown>
                    </p>
                  </div>
                </div>
              </div>
              <div class="bottom">
                &lt;!&ndash;<button class="btn1" @click="addCar(index)"><img src="../assets/images/home/addCar.jpg" alt=""></button>&ndash;&gt;
                <button class="btn2" @click="goPin(index)"><img src="../assets/images/home/pinDan.jpg" alt=""></button>
              </div>
            </li>
          </ul>
          <p class="goodsNone">{{noMore?'没有更多':'上拉加载更多'}}</p>-->
          <goodsBtn :goodsArr="goodsArr" :noMore=noMore></goodsBtn>


      </div>
      <!--<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">-->
      <!--<goodsBtn :goodsArr="goodsArr"></goodsBtn>-->
      <!--</mt-loadmore>-->
      <!--</div>-->
    </div>
    <!--遮罩层-->
    <div class="zhezhao" v-if='zhezhao1' @click="zzceng1()">
      <div class="wenzi">
              <span class="wenzi">
              长按图片，点击"发送给好友"<br>
              扫码即刻关注店铺
            </span>
      </div>
      <div class="zzc1_content" v-if="zzc1">
        <div class="content">
          <img :src="shopImgUrl" alt="" class="content-img">
          <p>{{shop.shopName}}</p>
          <p>更多优惠,等你来拼!</p>
          <canvas class="tupian" id="canvas">
            <!--<img id="canvas" src="./../assets/images/shops/erweima.png" alt="">-->
          </canvas>
          <p>记得邀请好友参与，拼单更快哦！</p>
        </div>
      </div>
    </div>
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>
    <loading v-show="showLoading "></loading>
  </div>

</template>
<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  /* eslint-disable semi */
  import Vue from 'vue'
  import QRCode from 'qrcode';
  import BScroll from 'better-scroll'
  import {relogin} from "../components/httpUtil/httpUtil";

  Vue.use(QRCode)
  export default {
    name: 'homeAllSort',
    data() {
      return {
        clickIndex: 0,
        shop: {},
        shopId: window.localStorage.shopId,
        shopImgUrl: '',
        spellCount: 0,
        goodsArr: [], //呈现商品数据
        gdArr1: [], //商品排序
        gdArr2: [],  //暂存商品数据
        curId: 0,
        showLoading: true, //显示加载动画
        //分页属性
        startIndex: 0,
        allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode: "auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
        zhezhao1: false,
        zzc1: false,
        noMore:false,
        showAlert:false,
        alertText:null
      }
    },
    created() {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
      this.loadData();
    },
    updated() {
      this.useqrcode();
    },
    methods: {
      // 隐藏动画
      hideLoading(){
        this.showLoading = false;
      },
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert = false;
      },
      loadData() {
        const jsonValue = JSON.stringify({
          'c': '10020',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id, // 用户ID
            'tokenId': token(),
//            'shopId': window.localStorage.shopId,
            'shopId': this.shopId, // 店铺ID
            'pageSize': 10,
            'startIndex': this.startIndex// 开始位置
          }
        });
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          const data = res.data.p;
          console.log(res)
          if (data.isTrue === true) {
            this.hideLoading();
            this.shop = data.shop;
            this.shopImgUrl = data.shopImgUrl;
            this.spellCount = data.spellCount;
            if(data.mallList.length===0) this.noMore=true
            this.goodsArr = this.goodsArr.concat(data.mallList);
            this.gdArr1 = data.mallList.slice(0);
            this.gdArr2 = data.mallList;
            // 上拉加载
            this.$nextTick(() => {
              if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.wrapper, {
                  scrollY: true,
                  click: true,
                  bindToWrapper: true,
                  pullUpLoad:{
                    threshold: -70, // 负值是当上拉到超过低部 70px；正值是距离底部距离 时，
                  }
                  // probeType: 1
                })
                this.scroll.on('pullingUp', (pos) => {
                  // 下拉动作
                  // if (pos.y < - 30) {
                    this.startIndex++;
                    console.log(this.startIndex)
                    this.loadData();
                  // this.scroll.finishPullUp();
                  this.scroll.refresh();
                  // }
                })
              } else {
                this.scroll.refresh()
              }
            })
          } else {
            this.hideLoading();
            this.alertTip(data.errorMsg);
            if (data.errorCode === 90) {
              this.go= ()=> {
                this.showAlert = false
                let _this = this
                relogin(_this)
              }
            }
          }

        })
      },

      // 生成店铺二维码
      useqrcode() {
//        const shopStr = window.location.search;
        const shopUrl = this.shop.shopUrl;
//        const shopStr = this.shopInfo.shopUrl.split('?')[1].split('&');
//        console.log(shopStr)
        console.log(shopUrl)
        let canvas = document.getElementById('canvas')
        let canvs = QRCode.toCanvas(canvas, shopUrl, function (error) {
          if (error) console.error(error)
          console.log('success!');
        })
      },
      /*// 是否通过二维码进入店铺
      scanCode() {
        const str = window.location.href.split('?')[1];
        console.log(str)
        if (str === undefined) {
          this.loadData()
          // this.getData();
        } else {
          const shopId = parseInt(str.split('&')[0].split('=')[1]);
          const shopType = parseInt(str.split('&')[1].split('=')[1]);
          console.log(shopId);
          console.log(shopType);
          console.log(window.localStorage.data)
          // 判断是否是游客
          if (window.localStorage.data === undefined) {
//            this.showAlert = true;
//            this.alertText = '关注赚多多公众号，注册成为拼团用户并登录，即可关注此店铺——更多优惠等你来拿哦!'
            this,go = function () {
//              this.showAlert =false;
              this.$router.push('/');
            }
          } else {
            // 若是拼团用户，则跳转到此二维码店铺，并关注
            if (JSON.parse(window.localStorage.data).type === 0) {
              this.shopId = shopId;
              // this.loadData()
              this.$router.push('/')
              // this.getData();
              this.focusShop();
              // 若不是拼团用户，则无法关注
            } else if (JSON.parse(window.localStorage.data).type === 1) {
              this.showAlert = true;
              this.alertText = '很抱歉，拼团用户才可关注店铺'
              this.go = function () {
                this.showAlert =false;
                this.$router.push('/disTrueHome')
              }
            }
          }
        }
      },
      // 扫码关注店铺
      focusShop() {
        const jsonValue = JSON.stringify({
          'c': '10053',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id, // 用户ID
            'tokenId': token(),
//            'shopId': window.localStorage.shopId,
            'shopId': this.shopId, // 店铺ID
            'pageSize': 10,
            'startIndex': 0 // 开始位置
          }
        });
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res);
          const data = res.data.p;
          if (data.isTrue === true) {
            alert('成功关注店铺')
          } else {
            alert(data.errorMsg);
            if (data.errorCode === 90) {
              this.$router.push('/fxlogin')
            }
          }
        }, (res) => {
          alert('网络错误');
        })
      },*/



      // 店铺信息
//       getData (startIndex) {
//         // 后台数据
//         const jsonValue = JSON.stringify({
//           'c': '10020',
//           'p': {
//             'userId': JSON.parse(window.localStorage.data).id, // 用户ID
//             'tokenId': token(),
// //            'shopId': window.localStorage.shopId,
//             'shopId': this.shopId, // 店铺ID
//             'pageSize': 10,
//             'startIndex': startIndex?startIndex:0 // 开始位置
//           }
//         });
//         this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
//           console.log(res);
//           const data = res.data.p;
//           if (data.isTrue === true) {
//             this.shop = data.shop;
//             this.shopImgUrl = data.shopImgUrl;
//             this.spellCount = data.spellCount;
//             this.goodsArr = this.goodsArr.concat(data.mallList);
//             this.gdArr1 = data.mallList.slice(0);
//             this.gdArr2 = data.mallList;
//             // 上拉加载
//             this.$nextTick(function () {
//               this.scrollMode = "touch";
//             });
//           } else {
//             alert(data.errorMsg);
//           }
//         }, (res) => {
//           alert('网络错误');
//         })
//       },
      // loadBottom:function() {
      //   // 上拉加载
      //   this.startIndex +=  1;
      //   this.getData(this.startIndex);
      //   this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
      // },
//      addCar () {
//        alert('加入购物车');
//      },
      // 导航栏切换变色
//      toggle (i, v) {
//        this.active = i
//      },
      // 指定属性排序的比较函数
      compare(property) {
        return function (obj1, obj2) {
          var value1 = obj1[property];
          var value2 = obj2[property];
          return value1 - value2;     // 升序
        }
      },
      allS() {
        console.log(this.gdArr2)
        this.goodsArr = this.gdArr2;
//        console.log(this.n2);
      },
      price() {
        this.clickIndex++;
        console.log(this.clickIndex);
        if (this.clickIndex % 2 !== 0) {
          this.goodsArr = this.gdArr1.sort(this.compare('salePrice'));
//          console.log(goodsArr);
        } else {
          this.goodsArr = this.gdArr1.reverse();
//          console.log(goodsArr)
        }
      },
      typeS() {
      },
      brand() {
      },
      invite() {
        //    alert('邀请好友');
        this.zhezhao1 = true;
        this.zzc1 = true;
      },
      zzceng1() {
        // 点击遮罩层关闭
        this.zhezhao1 = false;
        this.zzc1 = false;
      }
    }
  }
</script>
<style scoped>
  .homeAllSort {
    height: 100%;
    /*margin-top: 350px;*/
    background: #f4f4f4;
  }

  /*首页顶部*/
  #homeTop {
    width: 100%;
  /*   min-height:100%;*/
    /*padding-top: 80px;*/
    /*position: fixed;*/
    z-index: 99;
  }

  .shopTop {
    height: 178px;
    background: url("../assets/images/home/topTu.png") no-repeat;
    background-size: 100%; /*让图片自适应大小*/
  }

  .shopTop .left {
    margin: 40px 0 0 40px;
  }

  .shopTop .left .img {
    display: inline-block;
    width: 90px;
    height: 90px;
    margin-right: 20px;
    /*float: left;*/
  }

  .shopTop .left .img img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
  }

  .shopTop .left .right p {
    font-size: 30px;
    color: #fff;
    margin-top: 12px;
    /*文字太长，之后省略*/
    width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*float: right;*/
  }

  .shopTop .left .right span {
    font-size: 20px;
    color: #ccc;
  }

  .shopTop .share {
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: url("../assets/images/home/share.png") no-repeat;
    background-size: 100%;
    margin: 50px 30px 0 0;
  }

  /*分类导航*/
  .nav {
    /*margin-top: 80px;*/
    background: #ffffff;
    width: 100%;
    height: 92px;
    line-height: 92px;
    /*margin-top: 175px;*/
    /*position: fixed;*/
    /*top: 255px;*/
  }

  .nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    list-style: none;
  }

  .nav li {
    position: relative;
    font-size: 32px;
  }

  .nac li a {
    color: #BBBFC0;
  }

  .cur {
    /*background: #09f;*/
    color: #f00;
  }

  .nav i {
    position: absolute;
    width: 22px;
    height: 12px;
    background: url("../assets/images/home/upDown.png") no-repeat;
    background-size: 100%;
  }

  .nav .up {
    background-position: 0px 0px;
    top: 30px;
    left: 72px;
  }

  .nav .down {
    background-position: 0px -18px;
    position: absolute;
    top: 50px;
    left: 72px;
  }

  /*店铺所有分类*/
  .allSort {
    width: 100%;
    /*margin-top: 350px;*/
    background: #F4F4F4;
  }

  /*立即参团遮罩层*/
  .zhezhao {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 20000;
    position: fixed;
    top: 0px;
  }

  .zhezhao .zzc1_content, .zzc2_content {
    width: 500px;
    height: 240px;
    background: #fff;
    position: absolute;
    top: 260px;
    /*right: 78px;*/
    left: 50%;
    transform: translate(-50%, 0); /*左边50%，再平移自身的-50%*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
  }

  .zhezhao .wenzi {
    width: 400px;
    height: 116px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 80px;
    text-align: center;
  }

  .zhezhao .wenzi > span {
    font-size: 28px;
    color: #ffc731;
    text-align: center;
  }

  .zhezhao .zzc1_content {
    width: 490px;
    height: 604px;
    box-sizing: border-box;
    padding: 30px;
    background: linear-gradient(#f38571, #f1543e);
  }

  .zhezhao .zzc1_content .content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 38px 30px;
    border-radius: 8px;
  }

  .zhezhao .zzc1_content .content .content-img {
    float: left;
    width: 80px;
    height: 80px;
    margin: 0 20px;
    border-radius: 50%;
  }

  .zhezhao .zzc1_content .content p:nth-child(2) {
    width: 230px;
    float: left;
    font-size: 28px;
    color: #454343;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .zhezhao .zzc1_content .content p:nth-child(3) {
    margin-top: 6px;
    width: 232px;
    float: left;
    font-size: 20px;
    color: #a1a1a1;
  }

  .zhezhao .zzc1_content .content p:last-child {
    width: 100%;
    font-size: 22px;
    color: #fe3519;
    text-align: center;
  }

  .zhezhao .zzc1_content .content .tupian{
    width: 307px!important;
    height: 307px!important;
    margin:0 auto 0 !important;
    margin-left: 30px !important;
    border: none;
  }
  #canvas{
    width: 307px!important;
    height: 307px!important;
    margin:0 auto 0 !important;
    margin-left: 30px !important;
    border: none;
  }
  .wrapper {
    height: 680px;
    overflow: hidden;
  }
</style>
